closes #371

Overview

Implemented a reusable TagSelector component in the UI atoms library with full keyboard support, duplicate prevention, and autocomplete suggestions. The component is now integrated into the event creation form, allowing users to attach up to 10 tags (20 characters each) to each event.

Changes

New Component: TagSelector

• Location: app/frontend/components/ui/atoms/TagSelector/
• Files:
  • TagSelector.tsx – Main component with keyboard support, autocomplete, and inline validation
  • TagSelector.stories.tsx – Storybook stories for visual development
  • TagSelector.test.tsx – Unit tests for keyboard interactions and edge cases
  • index.ts – Public exports

Features Implemented

✅ Acceptance Criteria

1. Add/Remove Tags

   • Type tag text and press Enter or Comma to add
   • Click the × button on any tag chip to remove it
   • Press Backspace when input is empty to remove the last tag

2. Keyboard Support

   • Enter/Comma – Add tag
   • Backspace – Remove last tag (when input empty)
   • Arrow Up/Down – Navigate autocomplete suggestions
   • Escape – Close suggestions dropdown
   • Tab – Move to next field

3. Prevent Duplicates

   • Case-insensitive duplicate detection
   • Inline error message if user tries to add duplicate
   • Unique tags enforced by zod schema validation

4. Autocomplete Suggestions

   • Dropdown shows up to 6 matching suggestions as user types
   • Pre-populated with 12 default suggestions (Web3, Stellar, Blockchain, Hackathon, Workshop, etc.)
   • Mouse or keyboard navigation to select
   • Closes on Escape or when user moves to next field

Integration

• Updated Files:
  • app/frontend/components/forms/CreateEventForm.tsx – Integrated TagSelector with react-hook-form Controller
  • app/frontend/components/forms/schema/eventSchema.ts – Added tags field with zod validation (max 10 tags, each 1–20 chars)
  • app/frontend/components/ui/atoms/index.ts – Exported new component

Validation

• Schema: Tags are optional array, max 10 items, each 1–20 characters, unique (case-insensitive)
• Inline Errors:
  • "Tag already added" – Duplicate prevention
  • "You can add up to 10 tags" – Max limit reached
  • "Tag must be 20 characters or less" – Length exceeded

Styling & UX

• Design: Matches existing FormInput and SearchInput components
• Accessibility:
  • Full ARIA labels and descriptions
  • Focus ring indicators
  • Keyboard-fully-navigable
• Dark Mode: Uses CSS variables from design system (works with existing theme)

Testing

• Unit tests cover:
  • Adding tags with Enter key
  • Duplicate prevention
  • Removing tags with Backspace/click
  • Autocomplete suggestions
  • Error handling

Files Changed

app/frontend/
├── components/
│ ├── ui/atoms/
│ │ ├── TagSelector/
│ │ │ ├── TagSelector.tsx (NEW – 203 lines)
│ │ │ ├── TagSelector.stories.tsx (NEW – 59 lines)
│ │ │ ├── TagSelector.test.tsx (NEW – 52 lines)
│ │ │ └── index.ts (NEW)
│ │ └── index.ts (MODIFIED – added exports)
│ └── forms/
│ ├── CreateEventForm.tsx (MODIFIED – 48 lines added)
│ └── schema/eventSchema.ts (MODIFIED – tags field + defaults)

How to Test Locally

1. Start the frontend dev server: npm run dev
2. Navigate to /events/create (event organizer required)
3. Scroll to "Tags" field and test:
   • Type "web3" → Enter → Tag appears
   • Type "web3" → Enter → Error "Tag already added"
   • Press Backspace with empty input → Last tag removed
   • Type "ha" → Autocomplete shows "Hackathon" & "Hackathon" – select with arrow keys + Enter
   • Add 10 tags → Input disables ("Maximum 10 tags reached")
4. Try submitting form – tags are included in event creation payload

Backend Compatibility

✅ Backend already supports tags in:

• CreateEventDto (optional string array)
• Event model interface
• Database schema

No backend changes required.

Storybook

View component stories locally: npm run storybook → Navigate to UI/Atoms/TagSelector